<!--
 * @Description:登录页
 * @Author: Xiaowen丶
 * @Date: 2020-03-11 17:00:00
 * @LastEditors  : Xiaowen丶
 * @LastEditTime : 2020-03-11 17:00:00
-->

<template>
  <div class="index">
    <div class="form_con">
      <div class="bg"></div>
      <van-cell-group :border="false">
        <van-field
          label="手机号"
          clearable
          maxlength="11"
          type="tel"
          v-model="mobile"
          placeholder="请输入手机号"
        />
        <van-field
          type="tel"
          v-model="sms"
          center
          clearable
          maxlength="6"
          label="短信验证码"
          placeholder="请输入短信验证码"
        >
          <van-button
            color="#1989fa"
            slot="button"
            size="small"
            type="primary"
            :loading="sendLoading"
            :disabled="!canSend"
            @click="sendSms"
          >{{btnText}}</van-button>
        </van-field>
      </van-cell-group>
      <div class="btn_wrap">
        <van-button
          :disabled="confirmDis"
          :loading="confirmLoading"
          size="large"
          type="info"
          @click="login"
          loading-text="登陆中..."
        >登录</van-button>
      </div>
      <div class="hello">你好</div>
    </div>
  </div>
</template>

<script>
import { Cell, CellGroup, Field, Button, Toast, Checkbox } from 'vant'
import { regPhone } from '@/config/reg.config'
import { apiSendSms, apiLogin } from '@/api/login/login'
export default {
  name: 'Index',
  components: {
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Field.name]: Field,
    [Button.name]: Button,
    [Checkbox.name]: Checkbox
  },
  data() {
    return {
      timer: null,
      sendLoading: false,
      canSend: true,
      hasSend: false,
      waitTime: '',
      mobile: '',
      sms: '',
      confirmLoading: false,
      isShow: false,
      checked: false
    }
  },
  mounted() {
    this.$store.dispatch('setUrl', {
      tenantId: '383156',
      deptId: '1186922380869386241'
    })
  },
  methods: {
    verifyCodeStatus(second = 60) {
      const that = this
      that.waitTime = second
      that.timer = setInterval(function() {
        if (that.waitTime > 0) {
          that.waitTime--
        } else {
          that.canSend = true
          clearInterval(that.timer)
        }
      }, 1000)
    },
    sendSms() {
      if (!regPhone.test(this.mobile)) {
        Toast('请填写正确的手机号')
        return
      }
      this.canSend = false
      this.sendLoading = true
      const mobile = this.mobile
      const reqData = {
        mobile,
        tenantId: this.$store.state.url.tenantId,
        createDept: this.$store.state.url.deptId
      }
      apiSendSms(reqData)
        .then(res => {
          this.sendLoading = false
          const data = res.data
          if (data.code == 200) {
            Toast('短信验证码发送成功')
            this.verifyCodeStatus()
          } else {
            Toast(data.msg)
          }
        })
        .catch(() => {
          this.canSend = true
          this.sendLoading = false
        })
    },
    login() {
      const { tenantId } = this.$store.state.url
      if (!tenantId) {
        Toast('租户ID为空')
        return
      }
      this.confirmLoading = true
      const { mobile, sms } = this
      const reqData = { mobile, code: sms, tenantId }
      apiLogin(reqData)
        .then(res => {
          this.confirmLoading = false
          const data = res.data
          if (data.code == 200) {
            Toast('登录成功')
          } else {
            this.isShow = true
            Toast(data.msg)
          }
        })
        .catch(() => {
          this.isShow = true
          this.confirmLoading = false
        })
    }
  },
  computed: {
    btnText() {
      if (this.canSend) {
        return '发送验证码'
      } else {
        return `${this.waitTime}秒`
      }
    },
    confirmDis() {
      if (this.mobile != '' && this.sms != '') {
        return false
      } else {
        return true
      }
    }
  }
}
</script>
vue+vue-cli3+vant 快速启动项目模板
在vue-cli3创建的模板上进行封装，配置好项目的基础模块和功能。实现快速启动项目
<style scoped lang="less">
.index {
  width: 100%;
  height: 100vh;
  background: #fff;
  .bg {
    margin: 0 auto;
    width: 80px;
    height: 80px;
    background: url('../assets/img/delivery.svg') no-repeat;
    background-size: 100% 100%;
    margin-bottom: 30px;
  }
  .form_con {
    width: 100%;
    height: 100%;
    padding: 50px 20px 50px;
    .van-cell::after {
      position: absolute;
      box-sizing: border-box;
      content: ' ';
      pointer-events: none;
      right: 0;
      bottom: 0;
      left: 0.42667rem;
      border-bottom: 0.02667rem solid #ebedf0;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
    }
    .btn_wrap {
      margin: 0 auto;
      width: 100%;
      padding: 40px 0 10px;
    }
    .text {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 13px;
      color: #666;
      .text-cont {
        color: rgb(25, 137, 250);
      }
    }
  }
}
.form_con /deep/ .van-cell__title {
  flex: none;
}
.form_con /deep/ .van-cell__value {
  flex: 1;
}
.hello {
  color: @primary;
}
</style>
